<!DOCTYPE html>
<html>
<body>
<span id="description" style="color: white">
This test checks for drawing webgl to canvas 2d. The test process is as follows:
1. draw a green rect on a webgl context.
2. draw a red rect on a canvas 2d context, and check a pixel (should be red).
3. draw the webgl contents on the canvas 2d context, and check a pixel (should be green).
4. wait for few frames.
5. draw a red rect on the canvas 2d context, and check a pixel (should be red).
6. draw the webgl contents on the canvas 2d context, and check a pixel (see below explanation).

Above test is executed for both preserve and non-preserve webgl contexts.
For the preserve webgl context, the pixel on #6 is green.
For the non-preserve webgl context, the pixel on #6 is undefined.[1]

[1] http://www.khronos.org/registry/webgl/specs/latest/1.0/.
"This default behavior can be changed by setting the preserveDrawingBuffer
attribute of the WebGLContextAttributes object. If this flag is true, the
contents of the drawing buffer shall be preserved until the author either clears
or overwrites them. If this flag is false, attempting to perform operations
using this context as a source image after the rendering function has returned
can lead to undefined behavior.".
</span>
<canvas id="preserve-canvas3d" width="100" height="100"></canvas>
<canvas id="preserve-canvas2d" width="100" height="100"></canvas>
<canvas id="nonpreserve-canvas3d" width="100" height="100"></canvas>
<canvas id="nonpreserve-canvas2d" width="100" height="100"></canvas>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="resources/draw-webgl-to-canvas-2d.js"></script>
<script>
function createContexts() {
    preserve_ctx2D = document.getElementById("preserve-canvas2d").getContext("2d");
    preserve_canvas3D = document.getElementById('preserve-canvas3d');
    preserve_gl = preserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer': true});
    nonpreserve_ctx2D = document.getElementById("nonpreserve-canvas2d").getContext("2d");
    nonpreserve_canvas3D = document.getElementById('nonpreserve-canvas3d');
    nonpreserve_gl = nonpreserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer': false});
}
</script>
</body>
</html>
